/* Enable our transformations on SVG elements in IE11 */
          html {
            -ms-touch-action: none;
            touch-action: none;
             
       }
       #nav ul {
            list-style:none; 
position: absolute;
padding: 0;
left: 0;
display: none;
/* hides sublists */
}

li 
{
  list-style:none; 
 z-index:10000;
}
 
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.disable-text-selection {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  }

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

#nav {
  z-index: 10001;
}
 
::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-ampm-field {
  background: white;
  color: transparent;
  margin-left: -3px;
  position: absolute;
  width: 1px;
}
::-webkit-datetime-edit-hour-field {
  background: white;
  color: transparent;
  margin-left: -3px;
  position: absolute;
  width: 1px;
}



#nav li:hover {
background: #009A44
}
.mode a:hover {
  color: #009A44 !important;
  }
#nav ul li   {
  font-size: 100%;
  inline-size: min-content;
  hyphens: manual;
  width: auto;
  display:inline-block; 
  position: relative;
  min-width:200px;
  z-index: 10001;
  }
 
  #nav ul li a {
    font-size: 120%;
    inline-size: min-content;
    hyphens: manual;
    color: white; 
    width: auto;
    display:inline-block; 
     
    }
    #nav ul li a:hover {
 
      color: #FF671F
 
      } 

#nav li:hover ul ul {
display: none;
}
#nav li {
  width:20%;
  min-width:90px;
  list-style:none; 
background: #444444;
 
display:inline-block; 
}
 

/* hides sub-sublists */

#nav li:hover ul {
display: block;
list-style:none;
list-style:none;  
}


/* shows sublist on hover styling for side menu items */

#nav li li:hover ul {
display: block;
/* shows sub-sublist on hover */
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
list-style:none; 

}
li.sliderule-side,li.wind-side,li.full-screen
{
  font-size: 80%;
  margin-left: -30px !important;
}
.tutorial-submenu  {
 
  font-size: 100%;
  padding-top:5px;
 list-style:none; 
}
.sub-menu
{
  font-size:20px;
}
 
.container-fluid ul#nav li ul li.sub-sub-menu ul {
position: absolute;
left: 100%;
top: 0px;
display: none;
}

.container-fluid ul#nav li ul li.sub-sub-menu:hover ul {
display: block;
white-space: nowrap;
list-style:none; 
}




.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.column {
float: left;
width: 33.33%;
}
.updated-page-footer
{
  
  z-index:1001;
}
 
/*buton styles*/
/* enabled and disabled*/
.btn-close:not([disabled]),.practice-close:not([disabled]),.quiz-close:not([disabled])
{
  background-color:  red !important ;
  float:right;
}
.btn-close[disabled],.practice-close[disabled],.quiz-close[disabled]
{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
  float:right;
}
.btn-review
{
 
  top: 1.5vh;
  right: 2vh;
  display:inline-block;
  padding:0.2em .7em;
  margin:0.3em 0.3em 0 0;
  border-radius:0.15em;
  box-sizing: border-box;
  text-decoration:none;
  font-family:'Roboto',sans-serif;
  text-transform:uppercase;
  font-weight:400;
  color:#FFFFFF;
  background-color:#3369ff;
  box-shadow:inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17);
  text-align:center;
  position:absolute;
}
.btn-review-quiz
{
 
  top: 2.5vh;
  right: 2vh;
  display:inline-block;
  padding:0.2em .7em;
  margin:0.3em 0.3em 0 0;
  border-radius:0.15em;
  box-sizing: border-box;
  text-decoration:none;
  font-family:'Roboto',sans-serif;
  text-transform:uppercase;
  font-weight:400;
  color:#FFFFFF;
  background-color:#3369ff;
  box-shadow:inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17);
  text-align:center;
  position:absolute;
}
.review-problem
{
  margin-top: 1vh;
  margin-bottom: 1vh;
  text-decoration: underline;
  font-family:'Roboto',sans-serif;
  display:inline-block;
  cursor:pointer;
  width:45%;
}
 
#reviewContainer{
  margin-top: 2vh;
  margin-bottom: 2vh;
}
button:disabled,
button[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

.button3{
  display:inline-block;
 
  margin:0 0.3em 0.3em 0;
  border-radius:2em;
  box-sizing: border-box;
  text-decoration:none;
  font-family:'Roboto',sans-serif;
  font-weight:300;
  color:#FFFFFF;
  background-color:#009A44;
  text-align:center;
  transition: all 0.2s;
  min-width: 73px;
  min-height: 35px;
  }
  .button3:hover{
  background-color:#4095c6;
  }
  @media all and (max-width:30em){
  .button3{
  display:block;
  margin:0.2em auto;
  }
  }
/*Form and form styles for practice, quiz, and navlog*/
/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  width: 50%;
  max-width: 350px;
  bottom: 0;
  right: 15px;
  border: 0px solid #f1f1f1;
  z-index: 13000;
  }
  .form-popup-navlog {
    display: none;
    position: fixed;
    width: 50%;
   
    bottom: 0;
    right: 15px;
    border: 0px solid #f1f1f1;
    z-index: 13000;
  }
  /* Add styles to the form container */
  .form-container {
  
  height:auto;
  width: 100%;
  padding: 0;
  float:right;
  overflow-y: scroll;
  border: none;
  background-color: white;
  color: black;
  }
  
  /* Full-width input fields */
  /*
  .form-container input[type=text]{
  width: 100%;
  padding: 0;
  
  border: none;
  background: #f1f1f1;
  }
  */
  table input{
     
    padding: 0;
    width:100%;
    border: none;
    background: #f0fafa;
    }
  
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for the submit/login button */
.form-container .btn {
background-color: #04AA6D;
color: black;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
background-color: red;
}
.form-container .clear {
  background-color: #6ea1e9;
  }
/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
opacity: 1;
}
.form-style-9{
 max-width: 100%;
 background: #ffffff;
 padding: 10px;
 margin-bottom: 50px auto;
 box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.35);
 border-radius: 10px;
 border: 6px solid #04AA6D;
}
.form-style-9 ul{
 padding:0;
 margin:0;
 list-style:none;
}
.form-style-9 ul li{
 display: block;
 margin-bottom: 10px;
 min-height: 35px;
}
.form-style-9 ul li  .field-style{
 box-sizing: border-box; 
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box; 
 padding: 1px;
 outline: none;
 border: 1px solid #B0CFE0;
 -webkit-transition: all 0.30s ease-in-out;
 -moz-transition: all 0.30s ease-in-out;
 -ms-transition: all 0.30s ease-in-out;
 -o-transition: all 0.30s ease-in-out;

}.form-style-9 ul li  .field-style:focus{
 box-shadow: 0 0 5px #B0CFE0;
 border:1px solid #B0CFE0;
}
.form-style-9 ul li .field-2-parts{
 width: 50%;
}
.form-style-9 ul label .field-2-parts{
 width: 50%;
}
.form-style-9 ul li .field-3-parts{
 width: 33.3%;
}
.form-style-9 ul li .field-4-parts{
 width: 22%;
}
.form-style-9 ul li .field-9-parts{
 width: 11%;
}
.form-style-9 ul li .field-18-parts{
 width: 5.5%;
}
.form-style-9 ul li .field-full{
 width: 100%;
}
.form-style-9 ul li input.align-left{
 float:left;
}
.form-style-9 ul li input.align-right{
 float:right;
}
.form-style-9 ul li textarea{
 width: 100%;
 height: 100px;
}
.form-style-9 ul li .double{
  
 height: 75px;
  margin-top: 30px;
}

.form-style-9 ul li input[type="button"], 
.form-style-9 ul li input[type="submit"] {
 -moz-box-shadow: inset 0px 1px 0px 0px #3985B1;
 -webkit-box-shadow: inset 0px 1px 0px 0px #3985B1;
 box-shadow: inset 0px 1px 0px 0px #3985B1;
 background-color: #216288;
 border: 1px solid #17445E;
 display: inline-block;
 cursor: pointer;
 color: #FFFFFF;
 padding: 8px 18px;
 text-decoration: none;
 font: 12px Arial, Helvetica, sans-serif;
}
.form-style-9 ul li input[type="button"]:hover, 
.form-style-9 ul li input[type="submit"]:hover {
 background: linear-gradient(to bottom, #2D77A2 5%, #337DA8 100%);
 background-color: #28739E;
}
#file-icon {
    float: right;
    bottom: 70px;
    position: fixed;  
    z-index: 12crea000;  
     margin: 0 0 0 15px;
    }

#large-img {
    background-color: #fff;
    overflow: hidden;
    width: 150px;
    position: absolute;
    height: 150px;
    box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
    border: 4px solid #efefef;
    z-index: 1001;
    border-radius: 100%;
    display: block;opacity: 0;
    transition: opacity 0.2s;
    display:none;

}

#about-info {
  color: #fff;
  margin-left:50px;
  margin-top:30px;
  font-size: 90%;
}
#about-info a{
  color: #FF671F;
 
}
/* The Modal related css */
.modal-dialog {

 
  color: rgb(7, 0, 0);
}

.custom-modal-dialog {

  width: 450px;
  
  color: rgb(7, 0, 0);
}

.modal-header {

background-color: #009A44;

padding:0px 0px;

color:#FFF;

border-bottom:0px dashed #009A44;
padding-left: 5px;
padding-left: 5px;
}

.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
border-radius: 25px;
z-index: 1; /* Sit on top */
left: 5%;
top: 10%;
width: 20%;/* Full width */
min-width: 285px;
height: auto; /* Full height */
overflow: auto; /* Enable scroll if needed */
border: 2px solid #009A44;
background-color: #fefefe;
padding-left: 10px;
padding-right: 5px;
}
.center-modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 45%;
top: 20%;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */

}
.walkthrough-modal{
position: fixed;
z-index: 1001;
left: 5%;
top: -75px;
width: 20%; /* Full width */
min-width: 275px;
height: 100%; /* Full height */
border-radius: 25px;
border: 2px solid #009A44;
background-color: #fefefe;
}
.mobile-drag-icon
{
  position:relative;
  top:10px;
  left:10px; 
  width:24px; 
  height:24px;
  display:none;

}
 
/*Custom modal for switching out background to make it interactive*/
.custom-modal{
position: fixed;
z-index: 1001;
left: 5%;
top: 10%;
width: 20%; /* Full width */
min-width: 275px;
height: auto; /* Full height */
max-height: 500px;
border-radius: 25px;
border: 2px solid #009A44;
background-color: #fefefe;
}
.custom-modal-content {
 
padding: 20px;
margin: 2px auto; /* 15% from the top and centered */
 
width: 100%; /* Could be more or less, depending on screen size */
}
.modal-backdrop {
background-color: transparent;
}
/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  
   
 
  width: 100%; /* Could be more or less, depending on screen size */
}

.modal.fade {
z-index: 1000 !important;
transition: opacity 0s linear 0s !important;
}

/* The Close Button */
.close {
color: rgb(7, 0, 0);
float: right;
font-size: 28px;
font-weight: bold;
}
.next,.previous{
  
float: left;
 
}
#walk-thru-progress {
  width: 100%;
  display: none;
  background-color: #ddd;
}

#walk-thru-bar {
  width: 0%;
  height: 30px;
  white-space: nowrap;
  background-color: #04AA6D;
  text-align: center;
  line-height: 30px;
  color: white;
}
/* Modal Content/Box */
.bolded { font-weight: bold; }
.quiz-modal-p { margin:0 }


 /* handel checkmarks for the tutorial */
.fake-checkbox {
  display: inline-block;
  
  width: 16px;
  height: 16px;
  border: 1px solid #aaa;
  
  vertical-align: middle;
  border-radius: 4px;
  background-color: none;
  position: relative;
  
   
}
 
.fake-checkbox-checked {
  display: inline-block;
  
  width: 16px;
  height: 16px;
  border: 1px solid #aaa;
  
  vertical-align: middle;
  border-radius: 4px;
  background-color: #FF671F;
  position: relative;
  
   
}
.link-tutorial 
{
  display: inline-block;
}
.disable-tutorial-item
{
  pointer-events: none;
  opacity: 0.5;
}
 
/* Checkmart icon*/
.checkmark {
  display:inline-block;
  width: 22px;
  height:22px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
}

.checkmark_stem {
  position: absolute;
  width:3px;
  height:11px;
  background: #000;
  left:5px;
  top:6px;
}

.checkmark_kick {
  position: absolute;
  width:4px;
  height:3px;
  background: #000;
  left:2px;
  top:14px;
}

/* Menu icon*/
 

 .gg-menu {
  transform: scale(var(--ggs,1));
  z-index: 10003;
  cursor:pointer;
}
.gg-menu,
.gg-menu::after,
.gg-menu::before {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 24px;
  height: 4px;
  border-radius: 3px;
  background: #009A44;
}
.gg-menu::after,
.gg-menu::before {
  content: "";
  position: absolute;
  top: -8px
}
.gg-menu::after {
  top: 8px
}
/* Arrow up and down icon*/
.arrow-icon {
  border: solid black;
  border-width: 0 3px 3px 0;
  
  float:right;
  padding: 3px;
}

.down-arrow-icon  {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.up-arrow-icon {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
.down-arrow-gg-icon  {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.up-arrow-gg-icon {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
/* Tool tip css*/
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}


.tooltiptext-show {
  visibility: visible;
  opacity: 1;
}
.tooltiptext-hide {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}